<template>
	<view class=" editData" >
		<view class="img-box" @tap="choose">
			<image :src="content.face" class="img" ></image>
			<uni-icons type="camera" size="40" class="plus-icon" color="#1783dd" ></uni-icons>
			<!-- <uni-icons type="edit" size="40" class="plus-icon" color="#444" v-show="content.face"></uni-icons> -->
		</view>
		
		<view class="myData-box">
			<h3 class="myData-title">个人资料</h3>
			<view class="login-box">
				<view class="login-item">
					<span class="input-text">手机号</span>
					<input  class="login-input" type="text" disabled placeholder-style="color:#888888;" placeholder="手机号" v-model="content.mobile">
				</view>
				<view class="login-item">
					<span class="input-text">姓名</span>
					<input  class="login-input" type="text"  placeholder-style="color:#888888;" placeholder="姓名" v-model="content.nickName">
				</view>
				<view class="login-item">
					<span class="input-text">性别</span>
					<radio-group @change="radioChange" >
						<view class="main-data">
							<span class="item" v-for="(item1, index1) in options" :key="index1" style="margin-left:10rpx;">
								<radio :value="item1.id" :checked="item1.id==content.sex" color="#1783dd" style="transform: scale(0.9)"/>
								<span class="text" style="font-size:30rpx">{{item1.content}}</span>
							</span>
						</view>		
					</radio-group>
				</view>
				<view class="login-item">
					<span class="input-text">身份证号码</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="身份证号码" v-model="content.idCard" disabled>
				</view>
				
				<view class="login-item">
					<span class="input-text">邮箱地址</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="邮箱地址" v-model="content.email">
				</view>
				<view class="login-item">
					<span class="input-text">所在区域</span>
					<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions" :arrList="arrList" class="login-input login-input1">
			            <view  style="color:#888888" v-show="show">选择所在区域</view>
			            <view  v-show="!show">{{content.address}}</view>
			        </pick-regions>
					<uni-icons type="arrowright" class="iconyouEdit"/>
				</view>
				<view class="login-item">
					<span class="input-text">详细地址</span>
					<textarea placeholder="详细地址" class="login-input" placeholder-style="color:#888888;" v-model="content.address1" /> 
				</view>
			</view>
		</view>
	

		<view class="myData-box">
			<h3 class="myData-title">单位信息</h3>
			<view class="login-box">
				<view class="login-item">
					<span class="input-text">纳税识别号</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="纳税识别号" v-model="content.licenseNo">
				</view>
				<view class="login-item">
					<span class="input-text">个人职级</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="个人职级" v-model="content.personalRank">
				</view>
				<view class="login-item">
					<span class="input-text">单位名称</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="单位名称" v-model="content.companyName">
				</view>
				<view class="login-item">
					<span class="input-text">部门名称</span>
					<input  class="login-input" type="text"  placeholder-style="color:#888888;" placeholder="部门名称" v-model="content.officeName">
				</view>
				<view class="login-item">
					<span class="input-text">岗位名称</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="岗位名称" v-model="content.jobName">
				</view>
			</view>
		</view>
		<!-- <view class="myData-box">
			<h3 class="myData-title">兴趣爱好</h3>
			<view class="login-box Interest-box">
				<view class="Interest-item" v-for="(item,index) in list" :class="[item.addClass,item.addClass1]" @tap="select(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="myData-box">
			<h3 class="myData-title">个人介绍</h3>
			<view class="textarea-main">
				<textarea placeholder-style="color:#888888" placeholder="请输入个人介绍" class="textarea-input" :value="value" @input="valueChange" maxlength="300"/>
				<span class="yi-text">已输入{{len}}/300</span>
			</view>
		</view> -->
		<view class="edit-button" @tap="saveData">保存</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import Cookies from 'js-cookie'
	export default {
		computed:{},
		components: {uniIcons,pickRegions},
		data(){
			return{
				options:[
					{id:'1',content:'男',checked:false},
					{id:'2',content:'女',checked:false},
				],
				list:[
					{name:'家用电器',addClass:'',addClass1:''},
					{name:'手机/数码',addClass:'',addClass1:''},
					{name:'电脑/办公',addClass:'',addClass1:''},
					{name:'运动健康',addClass:'',addClass1:''},
					{name:'逛街购物',addClass:'',addClass1:''},
					{name:'个护化妆',addClass:'',addClass1:''},
					{name:'珠宝首饰',addClass:'',addClass1:''},
					{name:'汽车用品',addClass:'',addClass1:''},
					{addClass:'addItem'}
				],
				arrList:[],
				content:{address:[]},
				value:'',
				show:true,
				address:'',
				len:0,
				defaultRegions:['广东省','广州市','番禺区']
				
			}
		},
		onLoad(options) {
			this.getData();
			uni.showLoading();
			//this.getArea();
		},
		onReady(){

		},
		methods:{
			choose(){
				let that = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        uni.uploadFile({
				            url: that.$url+'/cloud/uploadFace', //仅为示例，非真实的接口地址
				            filePath: res.tempFilePaths[0],
				            name: 'file',
				            header:{
				            	token:uni.getStorageSync("token")
				            },
				            success: (uploadFileRes) => {
				            	let data = JSON.parse(uploadFileRes.data)
				            	if(data.code=="0"){
				            		that.content.face = that.$url+data.data;
				            	}
				            	else{
				            		uni.showToast({
				            			title:data.msg,
				            			icon:'none'
				            		})
				            	}
				                
				                //that.content.photo1 = data.data.url;
				            }
				        });
				    }
				});
			},
			handleGetRegions(regions){
				
                this.content.addressArr = regions.map(item=>item.code);
                this.content.address = regions.map(item=>item.name).join("");
                console.log(this.content.addressArr)
                this.show = false;
            },
            getArea(){
		      let that = this;
		      that.loading = true;
		      this.$http.get("/f/listArea")
		      .then(function (response) {
		        		console.log(response,6669999999);
		        		that.arrList = response.data;
		        		uni.hideLoading();
		      })
		      .catch(function (error) {
		          // handle error
		          console.log(error);
		      })
		    },
		    saveData(){
		    	if(this.content.nickName==""){
		    		uni.showToast({
		    			title:'请输入昵称',
		    			icon:'none'
		    		})
		    		return;
		    	}
		    	else if(this.content.sex==""){
		    		console.log(11)
		    		uni.showToast({
		    			title:'请选择性别',
		    			icon:'none'
		    		})
		    		return;
		    	}
		    	else if(this.content.idCard==""){
		    		uni.showToast({
		    			title:'请输入身份证',
		    			icon:'none'
		    		})
		    		return;
		    	}
		    	else if(this.content.idCard!=""){
		    		var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		    		if(reg.test(this.content.idCard) === false) 
					{ 
						
						uni.showToast({
			    			title:'身份证输入不合法',
			    			icon:'none'
			    		})
						return ; 
					} 
		    	}
		    	// else if(this.content.email==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入邮箱地址',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	// else if(this.content.addressArr.length==0){
		    	// 	uni.showToast({
		    	// 		title:'请选择区域',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	// else if(this.content.address1==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入详细地址',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	
		    	// else if(this.content.licenseNo==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入纳税识别号',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	// else if(this.content.personalRank==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入个人职级',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	// else if(this.content.companyName==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入单位名称',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	// else if(this.content.officeName==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入部门名称',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		    	
		    	// else if(this.content.jobName==""){
		    	// 	uni.showToast({
		    	// 		title:'请输入岗位名称',
		    	// 		icon:'none'
		    	// 	})
		    	// 	return;
		    	// }
		      var area1,area2,area3,area4;
		      area1=this.content.addressArr[0]?this.content.addressArr[0]:"";
		      area2=this.content.addressArr[1]?this.content.addressArr[1]:"";
		      area3=this.content.addressArr[2]?this.content.addressArr[2]:"";
		      area4=this.content.addressArr[3]?this.content.addressArr[3]:"";
		      console.log(area1,area2,area3,area4)
		      // area1=this.content.area1.id;
		      // area2=this.content.area2.id;
		      // area3=this.content.area3.id;
		      // area4=this.content.area4.id;
		      let that = this;
		      this.$http.post(that.$url+"/f/saveUserInfo?nickName="+this.content.nickName+"&sex="+this.content.sex+"&email="+this.content.email+"&area1Code="+area1+"&area2Code="+area2+"&area3Code="+area3+"&area4Code="+area4+"&area5="+this.content.address1+"&licenseNo="+this.content.licenseNo+"&companyName="+this.content.companyName+"&officeName="+this.content.officeName+"&personalRank="+this.content.personalRank+"&jobName="+this.content.jobName+"&idCard="+this.content.idCard)
		      .then(function (response) {
		          uni.showToast({
		          	title:'已修改'
		          })
		          uni.setStorageSync("mobile",that.content.mobile,{ expires: 1 });
	                uni.setStorageSync("nickName",that.content.nickName,{ expires: 1 });
	                uni.setStorageSync("photo",that.$url+that.content.photo,{ expires: 1 });
	                uni.setStorageSync("jobName",that.content.jobName,{ expires: 1 });
	                setTimeout(()=>{
	                	that.back();
	                },500)
		      })
		      .catch(function (error) {
		          // handle error
		          console.log(error);
		      })
		    },
            getData(){
		      let that = this;
		      this.loading = true;
		      this.$http.post("/f/userDetail")
		      .then(function (response) {
		        let data = response.data;
		        data.face = that.$url+data.face;
		        //data.face = "";
		        let arr = [];
		        let str = "";
		        let addressArr = [];
		        if(data.area1.areaCode!="" &&data.area1.areaCode){
		          arr.push(data.area1.areaName);
		          addressArr.push(data.area1.areaCode);
		          str += data.area1.areaName;
		        }
		        if(data.area2.areaCode!="" &&data.area2.areaCode){
		          arr.push(data.area2.areaName);
		          addressArr.push(data.area2.areaCode);
		          str += data.area2.areaName;
		        }
		        if(data.area3.areaCode!="" &&data.area3.areaCode){
		          arr.push(data.area3.areaName);
		          addressArr.push(data.area3.areaCode);
		          str += data.area3.areaName;
		        }
		        if(data.area4.areaCode!="" &&data.area4.areaCode){
		          arr.push(data.area4.areaName);
		          addressArr.push(data.area4.areaCode);
		          str += data.area4.areaName;
		        }
		        that.defaultRegions = arr;
		        that.show = false;
		          data.address = str;
		          data.addressArr = addressArr;
		          if( data.area5){
		          	data.address1 = data.area5;
		          }
		          else{
		          	data.address1 = "";
		          }
		          data.idCard = data.property1.idCard=="undefined"?"":data.property1.idCard;
		          that.content = data;
		          that.content.photo1 = "";

		      })
		      .catch(function (error) {
		          // handle error
		          console.log(error);
		      })
		    },
            valueChange(e){
            	this.len = e.detail.value.length;
            },
            radioChange(e){
				this.content.sex = e.detail.value;
				console.log(e)
			},
            submit(){
            	uni.showToast({
            		title:'个人资料已修改'
            	});
            	setTimeout(()=>{
            		this.back();
            	},500)
            },
            back(){
				uni.navigateBack({
				    delta: 1
				});
			},
            select(index){
            	this.list.forEach((item,i)=>{
            		if(item.name && i==index){
            			if(item.addClass1==""){
            				item.addClass1 = "isActive"
            			}
            			else{
            				item.addClass1 = ""
            			}
            		}
            	})
            },
			actionSheetTap() {
				//this.$refs.showshare.open()
				uni.showActionSheet({
					title:'确定退出当前账号',
					itemList: ['退出登录'],
					itemColor:'#F95E5A',
					success: (e) => {
						console.log(e.tapIndex);
						uni.showToast({
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
					}
				})
			},
			change(){		

			}
		}
	}
</script>

<style lang="less">

	.editData{
		padding:0;
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;
		overflow-y:auto;
		.img-box{
			width:200rpx;
			height:200rpx;
			display:block;
			border:1px dashed #ccc;
			border-radius:10rpx;
			margin:30rpx auto;
			position:relative;
			background:#fff;
			.plus-icon{
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
			}
		}
		.img{
				max-width:200rpx;
				max-height:200rpx;	
			}
		.edit-button{
			width:670rpx;
			margin:80rpx auto;
			border-radius:50rpx;
			height:90rpx;
			line-height:90rpx;
			text-align:center;
			font-size:32rpx;
			color:#ffffff;
			background-color:#0079fe;
		}
		.myData-box{
			width:100%;
			padding:0 50rpx;
			margin-top:40rpx; 
			box-sizing:border-box;
			.myData-title{
				line-height:40rpx;
				font-size:32rpx;
				color:#666666;
				font-weight:500;
				margin-bottom:30rpx;
			}
			.textarea-main{
				width:100%;
				box-sizing:border-box;
				margin:0 auto;
				height:360rpx;
				border:1px solid #f0f0f0;
				border-radius:10rpx;
				overflow:hidden;
				background:#ffffff;
				position:relative;
				.yi-text{
					line-height:40rpx;
					position:absolute;
					bottom:20rpx;
					right:20rpx;
					font-size:26rpx;
					color:#999999;

				}
				.textarea-input{
					width:100%;
					height:100%;
					padding:30rpx;
					box-sizing:border-box;
					font-size:28rpx;
					padding-bottom:60rpx;
					color:#666666;
					line-height:40rpx;
				}
			}
			.login-box{
				width:100%;
				box-sizing:border-box;
				margin:0 auto;
				
				border:1px solid #f0f0f0;
				border-radius:10rpx;
				overflow:hidden;
				
				.login-item{
					width:100%;
					height:100rpx;
					border-bottom:1px solid #f0f0f0;
					display:flex;
					align-items:center;
					background:#ffffff;
					.login-input{
						width:calc(100% - 150rpx);
						height:100rpx;
						font-size:28rpx;
						color:#666666;
						box-sizing:border-box;
						padding-left:40rpx;
						line-height:100rpx;
					}
					.login-input1{
						width:calc(100% - 210rpx);
					}
					.iconyouEdit{
						width:60rpx;
						height:100rpx;
						line-height:100rpx;
						text-align:left;
						font-size:32rpx;
						color:#888888 !important;
					}
					.input-text{
						width:180rpx;
						height:100rpx;
						display:block;
						box-sizing:border-box;
						padding-left:30rpx;
						line-height:100rpx;
						text-align:center;
						font-size:28upx;
						color:#666666;
					}
				}
				.login-item:last-child{
					border:0;
				}
			}
			.Interest-box{
				padding:0 15rpx;
				padding-top:30rpx;
				padding-bottom:10rpx;
				background:#ffffff;
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
				.Interest-item{
					width:200rpx;
					height:60rpx;
					box-sizing:border-box;
					margin-bottom:20rpx;
					border-radius:30rpx;
					border:1px solid #f0f0f0;
					line-height:56rpx;
					text-align:center;
					color:#888888;
					font-size:28rpx;
				}
				.isActive{
					border:0;
					line-height:60rpx;
					background:#0079fe;
					color:#ffffff;
				}
			}
		}

	}

</style>
